<template>
  <KView class="goods-order-goods-item">
    <KView class="goods-item-pic" @click="toGoodsDetail">
      <sys-image :src="goods.pic" mode="auto" :radius="8"></sys-image>
    </KView>
    <KView class="goods-item-data">
      <KView class="goods-item-name ellipsis">{{goods.name}}</KView>
      <KView class="goods-item-model ellipsis">{{goods.modelName}}</KView>
      <KView class="goods-item-data-text">下单时间：{{goods.getDatetimeValue('createTime','YYYY-MM-DD HH:mm:ss')}}</KView>

      <KView v-if="goods.status===1||goods.status===2" class="goods-item-data-text">支付时间：{{goods.getDatetimeValue('payTime','YYYY-MM-DD HH:mm:ss')}}</KView>
      <KView v-else-if="goods.status===3" class="goods-item-data-text">退款时间：{{goods.getDatetimeValue('refuseTime','YYYY-MM-DD HH:mm:ss')}}</KView>
      <KView v-else-if="goods.status===-1" class="goods-item-data-text">取消时间：{{goods.getDatetimeValue('cancelTime','YYYY-MM-DD HH:mm:ss')}}</KView>
      <KView v-if="goods.status===3" class="goods-item-data-text">退款金额：¥{{goods.refusePrice}}</KView>

      <KView class="goods-item-data-text">单价：¥{{goods.price}}</KView>
      <KView class="goods-item-data-text">数量：{{goods.count}}</KView>
      <KView class="goods-item-price clearfix">
        <KView class="goods-item-price-div">
          <span>总价：</span>
          <span style="color:#ff641f">¥{{goods.payPrice}}</span>
        </KView>

        <template v-if="goods.status===4">
          <KView v-if="order.activityTypeId===null&&!goods.isAppraise" class="goods-item-btn goods-item-evaluate" @click="evaluateGoods">评价</KView>
        </template>
        <template v-else-if="order.status===1">
          <template v-if="goods.status===1">
            <KView v-if="order.activityTypeId===null" class="goods-item-btn" @click="applyRetreat">申请退款</KView>
          </template>
          <KView v-else class="goods-item-status">{{i18n.getMsg(`goodsOrder.order.goodsStatus.${goods.status}`)}}</KView>
        </template>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysImage from 'common/sysImage';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      },
      order: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    methods: {
      applyRetreat() {
        this.$emit('apply-retreat', this.goods);
      },

      toGoodsDetail() {
        this.$emit('goods-detail', this.goods);
      },

      evaluateGoods(){
        this.$emit('evaluat-goods', this.goods);
      }
    },

    components: {
      SysImage
    }
  };

</script>

<style lang="scss">
  .goods-order-goods-item {
    display: flex;

    .goods-item-pic {
      width: formatPx(160);
      height: formatPx(160);
    }

    .goods-item-data {
      margin-left: formatPx(20);
      flex: 1;
      color: #2f3135;
      min-width: 0;

      >div {
        margin-bottom: formatPx(10);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .goods-item-name {
        font-size: formatPx(30);
      }

      .goods-item-model {
        font-size: formatPx(21);
        color: #b3b9c2;
      }

      .goods-item-data-text {
        font-size: formatPx(26);
      }

      .goods-item-price {
        font-size: formatPx(26);
        height: formatPx(50);

        .goods-item-price-div {
          float: left;
          line-height: formatPx(50);
        }

        .goods-item-btn {
          float: right;
          background: #fd5a3a;
          color: #ffffff;
          text-align: center;
          width: formatPx(180);
          height: formatPx(50);
          line-height: formatPx(50);
          border-radius: formatPx(25);
          &.goods-item-evaluate{
            background: none;
            color: #333333;
            border: 1px solid #333333;
            height: calc(#{formatPx(50)} - 2px);
          }
        }
        .goods-item-status{
          float: right;
          color: #fd5a3a;
          text-align: center;
          height: formatPx(50);
          line-height: formatPx(50);
        }
      }
    }
  }

</style>
